<template>
  <div class="new-table" :style="{height: height ? `${height}px` : `100%`}">
    <el-table
      v-loading="loading"
      :data="tableData"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange"
      @filter-change="handleFilterChange"
      :showHeader="showHeader"
      :header-cell-style="headerStyle"
      :cell-style="{textAlign: 'center'}"
      v-bind="childrenProps"
      :height="height"
    >
      <template v-for="(item, index) in userColumn" :key="index">
        <template v-if="item.slot">
          <slot :name="item.slot"></slot>
        </template>
        <el-table-column
          v-else
          :column-key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.minWidth"
          :sortable="item.sortable"
          :fixed="item.fixed"
          :filters="item.filters"
          :type="item.type"
        >
          <template #default="scope">
            <slot :name="item.prop" v-bind="scope">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="footer" v-if="showFooter">
      <slot name="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listCount"
        >
        </el-pagination>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      required: true,
    },
    userColumn: {type: Array, required: true},
    listCount: {
      type: Number,
      default: 0,
    },
    showIndexColumn: {
      type: Boolean,
      default: false,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 15,
    },
    childrenProps: {
      type: Object,
      default: () => ({}),
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
    },
    headerStyle: {
      type: Object,
      default: () => ({
        background: '#F5F5F5',
        color: '#333',
        'text-align': 'center',
        height: '50px',
      }),
    },
  },
  emits: ['selectionChange', 'updatePage', 'sortChange', 'filterChange', 'sizePage'],
  setup(props, {emit}) {
    const handleSelectionChange = (value: any) => {
      emit('selectionChange', value);
    };

    const handleCurrentChange = (currentPage: number) => {
      emit('updatePage', {currentPage});
    };

    const handleSizeChange = (pageSize: number) => {
      emit('sizePage', {pageSize});
    };
    const handleSortChange = (value: any) => {
      emit('sortChange', value);
    };
    const handleFilterChange = (value: any) => {
      emit('filterChange', value);
    };

    return {
      handleSelectionChange,
      handleCurrentChange,
      handleSizeChange,
      handleSortChange,
      handleFilterChange,
    };
  },
};
</script>

<style scoped lang="scss">
.el-table::before {
  height: 0;
}
.new-table {
  position: relative;
  .el-table {
    height: calc(100% - 80px);
    overflow-y: scroll;
  }
  .footer {
    position: absolute;
    bottom: 20px;
    right: 15px;
  }
}
</style>
